<template>
    <div>
<!--        顶部按钮区域-->
        <div>
          <el-button size="small" type="primary" @click="handleAdd">新增</el-button>
        </div>
<!--      列表区域-->
        <div style="margin-top:2px">
          <el-table
              :data="tableData"
              style="width: 100%"
              size="small"
              row-key="id"
              border
              lazy
              :load="load"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column v-for="(item,index) in columns" :key="index"
                :prop="item.prop"
                :label="item.label"

                align="center"
            >
              <template slot-scope="scope">
                <i :class="scope.row.iconClass" v-if="scope.column.property=='iconClass'" :key="index"/>
                <span v-else-if="scope.column.property=='type'">
                  <span>{{scope.row.type=='0'?'页面':'功能'}}</span>
                </span>
                <span v-else>{{scope.row[scope.column.property]}}</span>
              </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                align="center"
                width="100">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
<!--      表单区域-->
      <el-dialog title="菜单信息" :visible.sync="dialogFormVisible" :close-on-click-modal="false" >
        <el-form :model="formData" size="small" label-width="80px" style="height: 385px;">
          <el-form-item label="菜单名称">
            <el-input v-model="formData.menuName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="唯一标识">
            <el-input v-model="formData.menuIndex" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="路径">
            <el-input v-model="formData.path" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="父级节点">
            <el-popover
                placement="top"
                width="450"
                height="500"
                trigger="click"
                v-model="parentSelectShow"
            >
              <span slot="reference">
                <el-input suffix-icon='data-icon' v-model='formData.parentName'></el-input>
              </span>
              <div style="max-height: 400px;overflow: auto">
                <el-tree
                    :props="{label:'menuName',children:'children',isLeaf: 'leaf'}"
                    :load="loadNode"
                    lazy
                    @node-click="handleCheckChange">
                </el-tree>
              </div>
            </el-popover>
          </el-form-item>
          <el-form-item label="菜单类型">
            <el-select v-model="formData.type" placeholder="请选择菜单类型">
              <el-option label="页面" value="0"></el-option>
              <el-option label="功能" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="页面位置" v-if="formData.type=='0'">
            <el-input v-model="formData.view" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="功能名称" v-if="formData.type=='1'">
            <el-input v-model="formData.funcName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图标">
            <el-popover
                placement="top"
                width="450"
                trigger="click"
                v-model="popoverShow"
            >
              <span slot="reference">
                <el-input suffix-icon='data-icon' v-model='formData.iconClass'>
                 <template slot="append"><i :class="formData.iconClass"/></template>
                </el-input>
              </span>
              <div class="iconList">
                <i v-for="item in iconList" :key="item" :class="item" @click="setIcon(item)"
                   style="font-size:20px;cursor: pointer;"></i>
              </div>
            </el-popover>
          </el-form-item>
          <el-form-item label="排序">
            <el-inputNumber v-model="formData.sort" autocomplete="off"></el-inputNumber>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
          <el-button size="small" type="primary" @click="toSave">保 存</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
import {loadMenu,save,deleteById} from "../../api/menu";
import {elementIcons} from "../../config/utils/IconList";
import {Message} from "element-ui";

export default {
    name: 'MenuManage',
    data() {
        return {
          columns: [
            {
              prop: 'menuName',
              label: '菜单名称',
              width: 180,
            },            {
              prop: 'menuIndex',
              label: '唯一标识',
              width: 180,
            },{
              prop: 'path',
              label: '路径',
              width: 180,
            },            {
              prop: 'type',
              label: '菜单类型',
              width: 180,
            },{
              prop: 'iconClass',
              label: '图标样式',
              width: 180,
            },
          ],
          tableData: [],
          dialogFormVisible: false, //是否显示表单弹框，默认false
          formData:{type:'0'}, //表单数据
          parentSelectShow: false, //是否显示父级节点选择菜单
          popoverShow: false, //是否显示图标选择器
          iconList: [], //图标合集
          treeData: [{menuName:'无',children:[]}], //父节点树形选择器数据
        }
    },
    methods: {
      /** 懒加载列表数据 **/
      load(tree, treeNode, resolve) {
        loadMenu(tree.id).then(res=>{
          resolve(res.data);
        })
      },
      /** 懒加载树形选择数据 **/
      async loadNode(node,resolve){
        let treeData = [];
        let pid = null;
        if(node.level==0){
          pid = null;
        }else if(node.data && node.data.hasChildren){
          pid = node.data.id;
        } else {
          resolve([]);
        }
        await loadMenu(pid).then(res=>{
          treeData = res.data;
        })
        this.setLeafFlag(treeData);
        resolve(treeData);
      },
      /** 设置叶子节点标签 **/
      setLeafFlag(treeData){
        treeData.map(item=>{
          if(!item.hasChildren){
            item.leaf=true;
          }
        });
      },
      handleAdd(){
        this.formData = {type:'0'};
        this.dialogFormVisible = true;
      },
      /** 编辑 **/
      handleEdit(row){
        this.formData = row;
        this.formData.type = row.type+'';
        this.dialogFormVisible = true;
      },
      /** 删除 **/
      handleDelete(row){
        deleteById(row.id).then(res=>{
          console.log(res);
          if(res.success){
            Message.success(res.data);
            this.initTableData();
          }
        })
      },
      /** 设置图标 **/
      setIcon(icon) {
        this.$set(this.formData, 'iconClass', icon);
        this.popoverShow = false;
      },
      /** 选中父节点 **/
      handleCheckChange(node){
        console.log(node);
        this.formData.parentId = node.id;
        this.formData.parentName = node.menuName;
        this.parentSelectShow = false;
      },
      /** 保存表单数据**/
      toSave(){
        console.log(this.formData);
        save(this.formData).then(res=>{
          if(res.success){
            Message.success("保存成功");
            this.dialogFormVisible = false;
            this.initTableData();
          }
        })
      },
      initTableData(){
        loadMenu(null).then(res=>{
          this.tableData = res.data;
        });
      }
    },
  mounted() {
      this.iconList = elementIcons;
      this.initTableData();
  }
}
</script>

<style scoped>

/**滚动条宽度*/
::-webkit-scrollbar {
  width:8px;
}
/**内部滚动条*/
::-webkit-scrollbar-thumb{
  border-radius:10px;
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
  background-color:#ddd;
}
</style>